<template>
  <view :class="classNames" :style="style">
    <slot></slot>
  </view>
</template>

<script lang="ts">
import { computed, defineComponent, inject } from "vue";
import context from "../arco-row/context";
import { isString, isNumber } from "../../../utils/is";

function getAllowableFlexValue(flexValue) {
  if (
    (isString(flexValue) &&
      (["initial", "auto", "none"].includes(flexValue) ||
        /^\d+$/.test(flexValue))) ||
    isNumber(flexValue)
  ) {
    return flexValue;
  }
  if (isString(flexValue) && /^\d+(px|em|rem|%)$/.test(flexValue)) {
    console.log(flexValue, "我进去了");
    return `0 0 ${flexValue}`;
  }
  return void 0;
}

export default defineComponent({
  name: "ACol",
  options: {
    // 虚拟化节点
    virtualHost: true,
  },
  props: {
    span: {
      type: Number,
      default: 24,
    },
    offset: {
      type: Number,
      default: void 0,
    },
    order: {
      type: Number,
      default: void 0,
    },
    flex: {
      type: [Number, String],
      default: void 0,
    },
  },

  setup(props) {
    const prefixCls = "arco-col";

    const rowContext = inject(context.RowContextInjectionKey, {
      gutter: [0, 0],
    });
    const flexValue = computed(() => getAllowableFlexValue(props.flex));

    const classNames = computed(() => {
      const { span, offset, order } = props;
      return {
        [`${prefixCls}`]: true,
        [`${prefixCls}-order-${order}`]: order,
        [`${prefixCls}-${span}`]: !props.flex,
        [`${prefixCls}-offset-${offset}`]: offset && offset > 0,
      };
    });

    const paddingStyles = computed(() => {
      const { gutter } = rowContext;
      const result: any = {};
      if (Array.isArray(gutter)) {
        const paddingHorizontal = (gutter[0] && gutter[0] / 2) || 0;
        const paddingVertical = (gutter[1] && gutter[1] / 2) || 0;
        if (paddingHorizontal) {
          result.paddingLeft = `${paddingHorizontal}rpx`;
          result.paddingRight = `${paddingHorizontal}rpx`;
        }
        if (paddingVertical) {
          result.paddingTop = `${paddingVertical}rpx`;
          result.paddingBottom = `${paddingVertical}rpx`;
        }
      }
      return result;
    });

    const flexStyles = computed(() =>
      flexValue.value ? { flex: flexValue.value } : {},
    );

    const style = computed(() => {
      console.log(flexValue.value, "我还是style吗111");
      return Object.assign({}, flexStyles.value, paddingStyles.value);
    });
    return {
      classNames,
      style,
      flexValue,
    };
  },
});
</script>

<style lang="scss" scoped>
.arco-col {
  box-sizing: border-box;
}
.arco-col-1 {
  flex: 0 0 4.16666667%;
  width: 4.16666667%;
}
.arco-col-2 {
  flex: 0 0 8.33333333%;
  width: 8.33333333%;
}
.arco-col-3 {
  flex: 0 0 12.5%;
  width: 12.5%;
}
.arco-col-4 {
  flex: 0 0 16.66666667%;
  width: 16.66666667%;
}
.arco-col-5 {
  flex: 0 0 20.83333333%;
  width: 20.83333333%;
}
.arco-col-6 {
  flex: 0 0 25%;
  width: 25%;
}
.arco-col-7 {
  flex: 0 0 29.16666667%;
  width: 29.16666667%;
}
.arco-col-8 {
  flex: 0 0 33.33333333%;
  width: 33.33333333%;
}
.arco-col-9 {
  flex: 0 0 37.5%;
  width: 37.5%;
}
.arco-col-10 {
  flex: 0 0 41.66666667%;
  width: 41.66666667%;
}
.arco-col-11 {
  flex: 0 0 45.83333333%;
  width: 45.83333333%;
}
.arco-col-12 {
  flex: 0 0 50%;
  width: 50%;
}
.arco-col-13 {
  flex: 0 0 54.16666667%;
  width: 54.16666667%;
}
.arco-col-14 {
  flex: 0 0 58.33333333%;
  width: 58.33333333%;
}
.arco-col-15 {
  flex: 0 0 62.5%;
  width: 62.5%;
}
.arco-col-16 {
  flex: 0 0 66.66666667%;
  width: 66.66666667%;
}
.arco-col-17 {
  flex: 0 0 70.83333333%;
  width: 70.83333333%;
}
.arco-col-18 {
  flex: 0 0 75%;
  width: 75%;
}
.arco-col-19 {
  flex: 0 0 79.16666667%;
  width: 79.16666667%;
}
.arco-col-20 {
  flex: 0 0 83.33333333%;
  width: 83.33333333%;
}
.arco-col-21 {
  flex: 0 0 87.5%;
  width: 87.5%;
}
.arco-col-22 {
  flex: 0 0 91.66666667%;
  width: 91.66666667%;
}
.arco-col-23 {
  flex: 0 0 95.83333333%;
  width: 95.83333333%;
}
.arco-col-24 {
  flex: 0 0 100%;
  width: 100%;
}
.arco-col-offset-1 {
  margin-left: 4.16666667%;
}
.arco-col-offset-2 {
  margin-left: 8.33333333%;
}
.arco-col-offset-3 {
  margin-left: 12.5%;
}
.arco-col-offset-4 {
  margin-left: 16.66666667%;
}
.arco-col-offset-5 {
  margin-left: 20.83333333%;
}
.arco-col-offset-6 {
  margin-left: 25%;
}
.arco-col-offset-7 {
  margin-left: 29.16666667%;
}
.arco-col-offset-8 {
  margin-left: 33.33333333%;
}
.arco-col-offset-9 {
  margin-left: 37.5%;
}
.arco-col-offset-10 {
  margin-left: 41.66666667%;
}
.arco-col-offset-11 {
  margin-left: 45.83333333%;
}
.arco-col-offset-12 {
  margin-left: 50%;
}
.arco-col-offset-13 {
  margin-left: 54.16666667%;
}
.arco-col-offset-14 {
  margin-left: 58.33333333%;
}
.arco-col-offset-15 {
  margin-left: 62.5%;
}
.arco-col-offset-16 {
  margin-left: 66.66666667%;
}
.arco-col-offset-17 {
  margin-left: 70.83333333%;
}
.arco-col-offset-18 {
  margin-left: 75%;
}
.arco-col-offset-19 {
  margin-left: 79.16666667%;
}
.arco-col-offset-20 {
  margin-left: 83.33333333%;
}
.arco-col-offset-21 {
  margin-left: 87.5%;
}
.arco-col-offset-22 {
  margin-left: 91.66666667%;
}
.arco-col-offset-23 {
  margin-left: 95.83333333%;
}
.arco-col-order-1 {
  order: 1;
}
.arco-col-order-2 {
  order: 2;
}
.arco-col-order-3 {
  order: 3;
}
.arco-col-order-4 {
  order: 4;
}
.arco-col-order-5 {
  order: 5;
}
.arco-col-order-6 {
  order: 6;
}
.arco-col-order-7 {
  order: 7;
}
.arco-col-order-8 {
  order: 8;
}
.arco-col-order-9 {
  order: 9;
}
.arco-col-order-10 {
  order: 10;
}
.arco-col-order-11 {
  order: 11;
}
.arco-col-order-12 {
  order: 12;
}
.arco-col-order-13 {
  order: 13;
}
.arco-col-order-14 {
  order: 14;
}
.arco-col-order-15 {
  order: 15;
}
.arco-col-order-16 {
  order: 16;
}
.arco-col-order-17 {
  order: 17;
}
.arco-col-order-18 {
  order: 18;
}
.arco-col-order-19 {
  order: 19;
}
.arco-col-order-20 {
  order: 20;
}
.arco-col-order-21 {
  order: 21;
}
.arco-col-order-22 {
  order: 22;
}
.arco-col-order-23 {
  order: 23;
}
.arco-col-order-24 {
  order: 24;
}
</style>
